﻿<template>
	<div class="car_case-container">
		<el-dialog v-model="isShowDialog" :title="props.title" :width="1100" draggable="">


			<el-tabs type="border-card" v-model="activeName">
				<el-tab-pane label="基础信息" name="基础信息">
					<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
						<el-row :gutter="35">
							<el-form-item v-show="false">
								<el-input v-model="ruleForm.id" />
							</el-form-item>

							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="案例标题" prop="title">
									<el-input v-model="ruleForm.title" placeholder="请输入案例标题" clearable />
								</el-form-item>
							</el-col>

							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="封面图" prop="coverurl">
									<el-upload list-type="picture-card" :limit="1" v-model:file-list="fileList"
										:show-file-list="false" :http-request="uploadcoverurlHandle">
										<img v-if="ruleForm.coverurl" :src="ruleForm.coverurl"
											style="width: 100%; height: 100%; object-fit: contain" />
										<el-icon v-else>
											<Plus />
										</el-icon>
									</el-upload>
								</el-form-item>
							</el-col>

									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="车型" prop="carid">
									<el-cascader style="width: 100%;" filterable v-model="ruleForm.carList"
										:options="car_carDropdownList" @change="handleChangeCar" />
								</el-form-item>
							</el-col>


	                      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="颜色分类" prop="xilieSubId">
									<el-cascader tag-effect="dark" style="width: 100%;" filterable
										v-model="ruleForm.xilieList" :options="car_colorDropdown" :props="propsm"
										@change="handleChangeXiLie" />

								</el-form-item>
							</el-col>


							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="质感" prop="zhiganId">
									<el-select style="width: 100%;" multiple clearable filterable
										v-model="ruleForm.zhiganList" placeholder="请选择质感">
										<el-option v-for="(item, index) in car_zhiganDropdownList" :key="index"
											:value="item.value" :label="item.label" />
									</el-select>
								</el-form-item>
							</el-col>

							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="颜色" prop="xilieSubId">
									<el-select style="width: 100%;" multiple clearable filterable
										v-model="ruleForm.colorList" placeholder="请选择颜色">
										<el-option v-for="(item, index) in car_color2DropdownList" :key="index"
											:value="item.value" :label="item.label" />
									</el-select>
								</el-form-item>
							</el-col>

					


						


							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
								<el-form-item label="色系" prop="sexiId">
									<el-select style="width: 100%;" multiple clearable filterable
										v-model="ruleForm.sexiList" placeholder="请选择色系">
										<el-option v-for="(item, index) in car_SeXiDropdownList" :key="index"
											:value="item.value" :label="item.label" />
									</el-select>

								</el-form-item>

							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="内容" name="内容" v-if="props.title == '编辑案例'">
					<!-- <detailstable  ref="dateRef"   :caseobj="ruleForm"/> -->
					<div class="car_case_details-container">
						<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
							<el-form ref="queryForm" :inline="true">
								<el-form-item>
									<el-button type="primary" icon="ele-Plus" @click="openAddcar_case_details"
										v-auth="'car_case_details:add'"> 新增
									</el-button>
								</el-form-item>
							</el-form>
						</el-card>

						<el-card class="full-table" shadow="hover" style="margin-top: 8px">
							<el-table :data="tableData" style="width: 100%" v-loading="loading" tooltip-effect="light"
								row-key="id" border="">
								<el-table-column type="index" label="序号" width="55" align="center" fixed="" />
								<el-table-column prop="caseId" label="案例id" fixed="" show-overflow-tooltip="" />
								<el-table-column prop="url" label="地址" fixed="" show-overflow-tooltip="">
									<template #default="scope">
										<el-image style="width: 60px; height: 60px" :src="scope.row.url" :lazy="false"
											:hide-on-click-modal="true" :preview-src-list="[scope.row.url]"
											:initial-index="0" fit="scale-down" preview-teleported="" />
									</template>
								</el-table-column>


								<el-table-column prop="des" label="内容描述" fixed="" show-overflow-tooltip="" />
								<!-- <el-table-column prop="type" label="类型" fixed="" show-overflow-tooltip="" /> -->
								<el-table-column label="操作" width="140" align="center" fixed="right"
									show-overflow-tooltip=""
									v-if="auth('car_case_details:edit') || auth('car_case_details:delete')">
									<template #default="scope">
										<el-button icon="ele-Edit" size="small" text="" type="primary"
											@click="openEditcar_case_details(scope.row)"
											v-auth="'car_case_details:edit'"> 编辑 </el-button>
										<el-button icon="ele-Delete" size="small" text="" type="primary"
											@click="delcar_case_details(scope.row)" v-auth="'car_case_details:delete'">
											删除 </el-button>
									</template>
								</el-table-column>
							</el-table>
							<el-pagination v-model:currentPage="tableParams.page"
								v-model:page-size="tableParams.pageSize" :total="tableParams.total"
								:page-sizes="[10, 20, 50, 100]" small="" background="" @size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								layout="total, sizes, prev, pager, next, jumper" />
							<editDialog ref="editDialogRef" :title="editcar_case_detailsTitle"
								@reloadTable="handleQuery" />
						</el-card>

					</div>
					<!--  -->
				</el-tab-pane>

			</el-tabs>


			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>

import { ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { UploadRequestOptions } from "element-plus";
import { uploadcoverurl } from '/@/api/main/car_case';
import { addcar_case, updatecar_case } from "/@/api/main/car_case";
import { getcar_color2Dropdown } from '/@/api/main/car_case';
import { getcar_zhiganDropdown } from '/@/api/main/car_case';
import { getcar_SeXiDropdown } from '/@/api/main/car_case';
import { getcar_carDropdown } from '/@/api/main/car_case';
import { getcar_colorDropdown } from '/@/api/main/car_case';

import { auth } from '/@/utils/authFunction';
import { pagecar_case_details, deletecar_case_details } from '/@/api/main/car_case_details';
import { addcar_case_details, updatecar_case_details } from "/@/api/main/car_case_details";

//   import detailstable from '/@/views/main/car_case_details/index.vue'
import editDialog from '/@/views/main/car_case_details/component/editDialog.vue'
import { pagecar_tag, deletecar_tag ,car_tagPidDropdown} from '/@/api/main/car_tag';

const propsm = { multiple: true }
//=================
const editDialogRef = ref();
const loading = ref(false);
const tableData = ref<any>
	([]);
const queryParams = ref<any>
	({});
const tableParams = ref({
	page: 1,
	pageSize: 10,
	total: 0,
});
const editcar_case_detailsTitle = ref("");



// 查询操作
const handleQuery = async () => {
	loading.value = true;
	queryParams.value.caseId = ruleForm.value.id
	var res = await pagecar_case_details(Object.assign(queryParams.value, tableParams.value));
	tableData.value = res.data.result?.items ?? [];
	tableParams.value.total = res.data.result?.total;
	loading.value = false;
};

// 打开新增页面
const openAddcar_case_details = () => {
	editcar_case_detailsTitle.value = '添加案例内容';
	editDialogRef.value.openDialog({}, ruleForm.value.id);
};

// 打开编辑页面
const openEditcar_case_details = (row: any) => {
	editcar_case_detailsTitle.value = '编辑案例内容';
	editDialogRef.value.openDialog(row, ruleForm.value.id);
};

// 删除
const delcar_case_details = (row: any) => {
	ElMessageBox.confirm(`确定要删除吗?`, "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(async () => {
			await deletecar_case_details(row);
			handleQuery();
			ElMessage.success("删除成功");
		})
		.catch(() => { });
};

// 改变页面容量
const handleSizeChange = (val: number) => {
	tableParams.value.pageSize = val;
	handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
	tableParams.value.page = val;
	handleQuery();
};

//================
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: "",
	}
});
//父级传递来的函数，用于回调


const emit = defineEmits(["reloadTable"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
var activeName = "基础信息"
//自行添加其他规则
const rules = ref<FormRules>({
});


const handleChangeCar = (value) => {
	console.log(value)
}

const handleChangeXiLie = (value) => {
	
	 	value.forEach((item) => {
				 if(item.length>1)
	 {
 
handleQueryTag(item[1])
	 }
	});
		
	 
}
  
	   // 查询操作
        const handleQueryTag= async(tagid)  => {
		
        loading.value = true;
	  	 var queryParams ={ type:3,id:tagid}
       
		 const tableParams = ref({
  page: 1,
  pageSize: 1,
  total: 0,
});

         var res = await pagecar_tag(Object.assign(queryParams, tableParams.value));
		 var  getitem= res.data.result?.items ?? []
       	console.log(getitem)
		 	console.log(getitem[0].sexiList)
				 	console.log(ruleForm.value)
      ruleForm.value.sexiList=(getitem[0].sexiList)
	  ruleForm.value.colorList=(getitem[0].colorList)
	  ruleForm.value.zhiganList=(getitem[0].zhiganList)
    //     loading.value = false;
    };



// 打开弹窗
const openDialog = (row: any) => {


	ruleForm.value = JSON.parse(JSON.stringify(row));

	if (ruleForm.value.carList && ruleForm.value.carList.length > 0) {
		ruleForm.value.carList = ruleForm.value.carList[0]
	}

	console.log(ruleForm)
	activeName = "基础信息";
	handleQuery();
	//dateRef.value.handleQuery();
	isShowDialog.value = true;
};



// 关闭弹窗
const closeDialog = () => {
	emit("reloadTable");
	isShowDialog.value = false;
};

// 取消
const cancel = () => {
	isShowDialog.value = false;
};

// 提交
const submit = async () => {
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			console.log(ruleForm.value)


			let values = ruleForm.value;

			if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
				await updatecar_case(values);
			} else {
				ruleForm.value.imageurls = ""
				await addcar_case(values);
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: "error",
			});
		}
	});
};


const car_colorDropdown = ref<any>([]);
const getcar_colorDropdownList = async () => {
	let list = await getcar_colorDropdown();
	car_colorDropdown.value = list.data.result ?? [];
};
getcar_colorDropdownList();


const car_carDropdownList = ref<any>([]);
const getcar_carDropdownList = async () => {
	let list = await getcar_carDropdown();
	car_carDropdownList.value = list.data.result ?? [];
};
getcar_carDropdownList();

const car_color2DropdownList = ref<any>([]);
const getcar_color2DropdownList = async () => {
	let list = await getcar_color2Dropdown();
	car_color2DropdownList.value = list.data.result ?? [];
};
getcar_color2DropdownList();

const car_zhiganDropdownList = ref<any>([]);
const getcar_zhiganDropdownList = async () => {
	let list = await getcar_zhiganDropdown();
	car_zhiganDropdownList.value = list.data.result ?? [];
};
getcar_zhiganDropdownList();

// const treeOutputTreeOutputDropdownList = ref<any>([]);
// const getTreeOutputTreeOutputDropdownList = async () => {
// 	let list = await getTreeOutputTreeOutputDropdown();
// 	treeOutputTreeOutputDropdownList.value = list.data.result ?? [];
// };
// getTreeOutputTreeOutputDropdownList();

const car_SeXiDropdownList = ref<any>([]);
const getcar_SeXiDropdownList = async () => {
	let list = await getcar_SeXiDropdown();
	car_SeXiDropdownList.value = list.data.result ?? [];
};
getcar_SeXiDropdownList();

const fileList = [];
const uploadcoverurlHandle = async (options: UploadRequestOptions) => {
	//loadingImage=true;
	console.log(options)
	const res = await uploadcoverurl(options);
	ruleForm.value.coverurl = res.data.result?.url;
	fileList = [];
	//	loadingImage=false;
};





// 页面加载时
onMounted(async () => {
});

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
